<template>
	<view class="container">
		<view class="menu">
			 <uni-segmented-control :current="current" :values="value" @clickItem="onClickItem" styleType="button" activeColor="#99c5ff"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id">
				<view class="pic">
					<image :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onRefresh()"> 
				<uni-icons type="reload" size="30"></uni-icons>
			</view>
			<view class="item" @click="onTop()">
				<uni-icons type="arrow-up" size="30"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
const pets = ref([]);
const current = ref(0);
const classify = [{key:"all",value:"全部"},{key:"dog",value:"狗狗"},{key:"cat",value:"猫猫"}]
const value = computed(()=>classify.map(item=>item.value))
const onClickItem=(e)=>{
	current.value = e.currentIndex
	pets.value = []
	network()
}
// 网络请求
function network(){
		uni.showNavigationBarLoading()
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:10,
				type:classify[current.value].key
			},
			header:{
				"access-key":"wytwt0105"
			}
		}).then(res=>{
			// console.log(res.data.data);
			if(res.data.errCode===0){
				pets.value = [...pets.value,...res.data.data]
			}else if(res.data.errCode===400){
				uni.showToast({
					title:res.data.errMsg,
					icon:"none"
				})
			}
			
		}).catch(err=>{
			uni.showToast({
				title:"请求有误，请重新刷新",
				icon:"none"
			})
		}).finally(()=>{
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		})
	}

//触底加载更多
onReachBottom(()=>{
	network()
})

//下拉刷新
onPullDownRefresh(()=>{
	pets.value=[]
	network()
})

//点击刷新
const onRefresh = function(){
	uni.startPullDownRefresh()
}
//返回顶部
const onTop = ()=>{
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
	})
}
// 放大图片后左右滑动预览
const onPreview = function(index){
	let urls = pets.value.map(item=>item.url);
	uni.previewImage({
		current:index,
		urls:urls
	})
}
network();
</script>

<style lang="scss" scoped>
.container{
	.menu{
		padding: 50rpx 50rpx 0;
	}
	.layout{
		padding: 50rpx;
		.box{
			margin-bottom: 60rpx;
			box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
			border-radius: 15rpx;		//圆角
			overflow: hidden;
			.pic{
				image{
					width:100%;
				}
			}
			.text{
				padding: 30rpx;
			}
		}
	}
	.float{
		position: fixed;
		right:30rpx;
		bottom:0rpx;
		padding-bottom: env(safe-area-inset-bottom);
		.item{
			width: 90rpx;
			height: 90rpx;
			background: rgba(255,255,255,0.9);
			border-radius: 50%;
			margin-bottom: 20rpx;
			display:flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #eee;
		}
	}
}

</style>
